import { ArticleItem } from "@/components/ArticleItem";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { useGetArticle } from "@/services/article";
import { Error } from "./errors/Error";
import { Loading } from "./Loading";
import { Button } from "./ui/button";
import { Link } from "@tanstack/react-router";
export const ArticleList = () => {
  const { isPending, isError, error, data } = useGetArticle();
  if (isPending) return <Loading />;
  if (isError) return <Error error={error} />;
  return (
    <section className="container">
      <Card>
        <CardHeader>
          <CardTitle>我的博客</CardTitle>
          <CardDescription className="flex justify-between">
            希望你会喜欢我的博客
            <Link to="/front/create">
              <Button variant="outline">发表文章</Button>
            </Link>
          </CardDescription>
        </CardHeader>
        <CardContent>
          {data.map((article) => {
            return <ArticleItem article={article} key={article.id} />;
          })}
        </CardContent>
      </Card>
    </section>
  );
};
